<template>
    <div id="pendingIssue">
        <div class="page-title">纠纷处理</div>
        <el-alert
                title="尽快处理纠纷问题避免降权！"
                show-icon
                type="info"></el-alert>
        <div class="container padder">
            <div class="filter">
                <el-form :inline="true">
                    <el-form-item label="">
                        <el-date-picker
                                v-model="searchForm.time"
                                type="daterange"
                                start-placeholder="开始日期"
                                range-separator="至"
                                end-placeholder="结束日期"
                                value-format="timestamp"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select
                                v-model="searchForm.da_leimu_id"
                                type="date"

                                placeholder="选择类目">
                            <el-option v-for="item in $store.state.indexTypes.da_fenlei_data"
                                       :key="item.Id"
                                       :label="item.fenlei_mingcheng"
                                       :value="item.Id"

                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="请输入关键词" v-model="searchForm.shangping_mingcheng"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="请输入订单号" v-model="searchForm.ddh"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList" :loading="tableLoading">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="m-t">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <!--<el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>-->
                    <el-table-column
                            prop="ddh"
                            label="订单号"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="chengjiao_zongjia"
                            label="订单金额(元)"
                    >
                        <template v-slot="scope">
                            {{(scope.row.chengjiao_zongjia / 100).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="create_time"
                            label="纠纷时间"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="shangping_mingcheng"
                            label="商品名称"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="shouhou_zhuangtai"
                            label="纠纷状态"
                    >
                        <template v-slot="scope">
                            {{scope.row.shouhou_zhuangtai | statusStr}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="操作"
                    >
                        <template slot-scope="scope">
                            <el-link type="success"
                                     class="m-r"
                                     @click="agree(scope.row.ddh)"
                                     v-if="scope.row.shouhou_zhuangtai === 2 || scope.row.shouhou_zhuangtai === 3"
                            >同意退款
                            </el-link>
                            <el-link type="danger" @click="reject(scope.row.ddh)" class="m-r"
                                     v-if="scope.row.shouhou_zhuangtai === 2">拒绝退款
                            </el-link>
                            <el-link type="primary"
                                     @click="chat(scope.row.ddh)"
                                     v-if="scope.row.shouhou_zhuangtai === 2 || scope.row.shouhou_zhuangtai === 3"
                                     class="">继续沟通
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" :options="searchForm" @change="getList"></pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import mixins from '../../mixin'

    export default {
        name: 'pendingIssue',
        components: {},
        mixins: [mixins],
        data() {
            return {
                searchForm: {
                    da_leimu_id: '',
                    page: 1,
                    ddh: '',
                    shangping_mingcheng: '',
                    time: ''
                },
                total: 0,
                tableLoading: false,
                tableData: [],
            }
        },
        computed: {},
        filters: {
            statusStr(val) {
                let obj = {
                    1: '未发起售后',
                    2: '买家申请售后',
                    3: '卖家拒绝退款请求，等待买家处理',
                    4: '退款成功',
                    5: '买家取消退款',
                };
                return obj[val]
            }
        },
        methods: {
            //同意退款
            agree(ddh) {
                this.$confirm('确认同意退款吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post(`/api/shanghu/dd_tongyi_tuikuan`, {ddh})
                        .then(res => {
                            if (res.code === '200') {
                                this.$message.success(res.msg);
                                this.getList();
                            }
                        })
                })
            },
            reject(ddh) {
                this.$confirm('是否确认拒绝退款?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post(`/api/shanghu/dd_jujue_tuikuan`, {ddh})
                        .then(res => {
                            if (res.code === '200') {
                                this.$message.success(res.msg);
                                this.getList();
                            }
                        })
                })
            },
            //继续沟通
            chat(id) {
                this.$router.push({name: 'chat', query: {id, type: '2'}})
            },
            //表格选择
            handleSelectionChange() {
            },
            //获取列表
            getList() {
                this.tableLoading = true;
                this.$axios.post(`/api/shanghu/get_i_jiufen_dingdan`, this.searchForm)
                    .then(res => {
                        this.tableLoading = false;
                        if (res.code === `200`) {
                            this.tableData = res.data.dingdan_data;
                            this.total = res.data.shuliang;
                        }
                    })
            }
        },
        mounted() {
            this.getList()
        },
    }
</script>

<style lang="less" scoped>
    #pendingIssue {

    }
</style>
